<template>
  <div class="container">
    <el-card class="box-card">
      <el-row style="margin-bottom: 15px" v-if="this.$route.query.id">
        <el-col>
          <el-breadcrumb separator="/" >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
<!--      搜索区域-->
     <el-row type="flex" justify="space-between">
      <el-col :span="20">
        <el-form :inline="true"  ref="form" :model="form" label-width="80px">
          <el-form-item label="目录名称">
            <el-input
              v-model="form.directoryName"
              size="small"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option
                label="启用"
                value="1">
              </el-option>
              <el-option
                label="禁用"
                value="0">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="delform">清空</el-button>
            <el-button type="primary" size="small" @click="statesearch"
            >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
       <el-col :span="4">
           <el-button
             v-if="subjectID"
             type="text"
             size="small"
             @click="$router.back()"
           >
             ←返回学科</el-button
           >
           <el-button
             type="success"
             icon="el-icon-edit"
             size="small"
             @click="newlycatalogue"
           >新增目录</el-button
           >
       </el-col>
     </el-row>
      <el-alert :title="`数据一共${this.page.counts}条`" type="info" show-icon :closable="false">
      </el-alert>

<!--      表单区域-->
      <el-table :data="list" v-loading="loading">
        <el-table-column type="index" label="序号" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="目录名称" prop="directoryName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建时间" >
          <template v-slot="{row}">
            {{row.addDate| parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" />

        <el-table-column label="状态"  >
          <template v-slot="{row}">
            {{row.state===1?'已启用':'已禁用'}}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="changeStateBtn(row.id,row.state)"
              >{{row.state===1?'禁用':'启用'}}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.state===1"
              @click="editBtn(row.id)"
              >修改</el-button
            >
            <el-button type="text" :disabled="row.state===1" size="small" @click="delBtn(row.id) "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

<!--      分页-->
      <el-row style="margin-top: 20px; text-align: right" align="middle">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="page.page"
          :total="page.counts"
          :page-size.sync="page.pagesize"
          @current-change="changePage"
          @size-change="changeSize"
        />
      </el-row>
    </el-card>
    <el-dialog
      width="400px"
      :title="showTitle"
      :visible="shownewlycatalogue"
      @close="btnCancelcata"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item label="所属学科"  v-if="!this.$route.query.id">
          <el-select v-model="roleForm.subjectID" placeholder="请选择" @focus="getList">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" >
          <el-input
            v-model="roleForm.directoryName"
            placeholder="请输入目录名称"
          />
        </el-form-item>
      </el-form>

      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="12">
          <el-button size="small" @click="btnCancelcata">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row></el-dialog
    >
  </div>
</template>

<script>
import { add, changeState, detail, list, remove } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects'
export default {
  watch: {
    $route () {
      console.log(this.$route.query.id)
      this.subjectID = this.$route.query.id
      this.getcatalogueelist()
    }
  },
  data () {
    return {
      showTitle: '新增目录',
      loading: false,
      options: [],
      shownewlycatalogue: false,
      subjectID: this.$route.query.id,
      username: null,
      form: {
        directoryName: null,
        state: null
      },

      roleForm: {
        directoryName: null,
        subjectID: null
      },
      rules: {
        directoryName: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }]
      },
      list: [],
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 每页请求多少条数据
        counts: 0 // 总数
      }
    }
  },
  created () {
    this.getcatalogueelist()
  },
  methods: {
    async editBtn (id) {
      this.showTitle = '修改目录'
      const { data } = await detail({ id })
      this.roleForm = data
      this.shownewlycatalogue = true
    },
    async getList () {
      const { data } = await simple()
      console.log(data)
      this.options = data
    },
    async changeStateBtn (id, state) {
      await changeState({
        id: id,
        state: state === 1 ? 0 : 1
      })
      this.$message.success('更新成功')
      await this.getcatalogueelist()
    },
    changeSize (val) {
      this.page.pagesize = val
      this.getcatalogueelist()
    },
    changePage (val) {
      this.page.page = val
      this.getcatalogueelist()
    },
    newlycatalogue () {
      this.showTitle = '新增目录'
      this.shownewlycatalogue = true
    },
    // 获取目录列表
    async getcatalogueelist () {
      try {
        this.loading = true
        if (this.subjectID) {
          const res = await list({ ...this.page, subjectID: this.subjectID * 1 })
          this.list = res.data.items
          this.loading = false
          this.page.counts = res.data.counts
        } else {
          const res = await list(this.page)
          this.list = res.data.items
          this.loading = false
          this.page.counts = res.data.counts
        }
      } catch (error) {
        this.$meassage.error('目录渲染错误,请等待~')
      }
    },
    delform () {
      this.form = {
        directoryName: null,
        state: null
      }
    },
    async statesearch () {
      this.page.page = 1
      const res = await list({
        ...this.form,
        ...this.page
      })
      this.list = res.data.items
      this.page.counts = res.data.counts
    },
    async delBtn (id) {
      await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove({ id })
      this.$message.success('删除成功')
      await this.getcatalogueelist()
    },
    async btnOK () {
      try {
        if (this.$route.query.id) {
          this.roleForm.subjectID = parseInt(this.subjectID)
        }
        await this.$refs.roleForm.validate()
        await add(this.roleForm)
        this.$message.success('添加成功')
        await this.getcatalogueelist()
        this.btnCancelcata()
      } catch (e) {
        console.log(e)
      }
    },
    btnCancelcata () {
      this.shownewlycatalogue = false
      this.roleForm = {
        directoryName: null,
        subjectID: null
      }
    }
  }
}
</script>

<style scoped lang="less">
.breadcrumb {
  height: 50px;
}
.weizhi {
  position: relative;
  left: 830px;
}
.orientation {
  position: relative;
  margin-left: 1500px;
  margin-top: -37px;
}
.twobut {
  position: relative;
  margin-left: -110px;
}
</style>
